<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>活动筛选 - 心动社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
            background-color: #f8fafc;
            color: #334155;
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 0.75rem 0;
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #3b82f6;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .nav-link {
            color: #64748b;
            font-weight: 500;
            transition: color 0.2s;
            padding: 0.5rem 1rem !important;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #3b82f6;
        }
        
        /* 筛选区域样式 */
        .filters-container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.02);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .filter-section {
            margin-bottom: 1.5rem;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 1rem;
            color: #1e293b;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .filter-chip {
            padding: 0.4rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
            background-color: #f1f5f9;
            color: #64748b;
        }
        
        .filter-chip:hover {
            background-color: #e2e8f0;
        }
        
        .filter-chip.active {
            background-color: #3b82f6;
            color: white;
        }
        
        .filter-input-group {
            display: flex;
            gap: 1rem;
        }
        
        .form-control {
            border-color: #e2e8f0;
            transition: all 0.3s;
        }
        
        .form-control:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .range-slider {
            width: 100%;
            margin-top: 1rem;
        }
        
        .range-values {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: #64748b;
            margin-top: 0.5rem;
        }
        
        /* 筛选操作按钮 */
        .filter-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1rem;
            border-top: 1px solid #f1f5f9;
            margin-top: 1rem;
        }
        
        .btn-reset {
            background-color: #f1f5f9;
            color: #64748b;
            border: none;
        }
        
        .btn-reset:hover {
            background-color: #e2e8f0;
            color: #334155;
        }
        
        .btn-apply {
            background-color: #3b82f6;
            color: white;
            border: none;
        }
        
        .btn-apply:hover {
            background-color: #2563eb;
        }
        
        /* 排序和视图切换 */
        .sort-view-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .sort-options {
            display: flex;
            gap: 1rem;
        }
        
        .sort-option {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #64748b;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
        }
        
        .sort-option:hover {
            background-color: #f1f5f9;
        }
        
        .sort-option.active {
            color: #3b82f6;
            font-weight: 500;
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
            background-color: white;
            color: #64748b;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .view-btn:hover {
            border-color: #3b82f6;
            color: #3b82f6;
        }
        
        .view-btn.active {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }
        
        /* 活动卡片样式 */
        .events-container {
            margin-bottom: 2rem;
        }
        
        .event-card {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.02);
            transition: all 0.3s ease;
            margin-bottom: 1.5rem;
        }
        
        .event-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        }
        
        .event-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .event-card:hover .event-image {
            transform: scale(1.03);
        }
        
        .image-container {
            overflow: hidden;
            position: relative;
        }
        
        .no-image {
            width: 100%;
            height: 100%;
            background-color: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
        }
        
        .event-content {
            padding: 1rem;
        }
        
        .event-category {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        
        .event-title {
            font-weight: 600;
            font-size: 1.1rem;
            color: #1e293b;
            margin-bottom: 0.5rem;
            transition: color 0.2s;
        }
        
        .event-card:hover .event-title {
            color: #3b82f6;
        }
        
        .event-meta {
            font-size: 0.85rem;
            color: #64748b;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.25rem;
        }
        
        .event-host {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            color: #64748b;
            margin-bottom: 0.75rem;
        }
        
        .host-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .event-stats {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 0.8rem;
            color: #64748b;
            margin-bottom: 0.75rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .event-actions {
            display: flex;
            gap: 0.5rem;
        }
        
        .action-btn {
            background: none;
            border: 1px solid #e2e8f0;
            color: #64748b;
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .action-btn:hover {
            background-color: #f1f5f9;
            color: #3b82f6;
            border-color: #cbd5e1;
        }
        
        .action-btn.primary {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }
        
        .action-btn.primary:hover {
            background-color: #2563eb;
        }
        
        /* 不同视图布局 */
        .grid-view {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .grid-view .event-card {
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
        }
        
        .grid-view .image-container {
            height: 180px;
        }
        
        .list-view .event-card {
            display: flex;
        }
        
        @media (min-width: 768px) {
            .list-view .image-container {
                flex: 0 0 200px;
                height: 160px;
            }
            
            .list-view .event-content {
                flex: 1;
                display: flex;
                flex-direction: column;
            }
            
            .list-view .event-stats {
                margin-top: auto;
                margin-bottom: 0.5rem;
            }
        }
        
        @media (max-width: 767px) {
            .list-view .event-card {
                flex-direction: column;
            }
            
            .list-view .image-container {
                height: 180px;
            }
        }
        
        .compact-view .event-card {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
        }
        
        .compact-view .image-container {
            flex: 0 0 80px;
            height: 80px;
            border-radius: 8px;
            margin-right: 1rem;
        }
        
        .compact-view .event-content {
            flex: 1;
            padding: 0;
        }
        
        .compact-view .event-title {
            margin-bottom: 0.25rem;
            font-size: 1rem;
        }
        
        .compact-view .event-host,
        .compact-view .event-category {
            display: none;
        }
        
        .compact-view .event-actions {
            display: none;
        }
        
        /* 分类颜色 */
        .cat-music { background-color: #e0f2fe; color: #0369a1; }
        .cat-food { background-color: #fef3c7; color: #92400e; }
        .cat-movie { background-color: #e0e7ff; color: #4338ca; }
        .cat-sport { background-color: #dcfce7; color: #15803d; }
        .cat-art { background-color: #fee2e2; color: #b91c1c; }
        .cat-travel { background-color: #f3e8ff; color: #7c3aed; }
        .cat-study { background-color: #d1fae5; color: #065f46; }
        
        /* 分页和结果统计 */
        .results-info {
            margin-bottom: 1rem;
            color: #64748b;
            font-size: 0.9rem;
        }
        
        .pagination-container {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        
        .pagination {
            display: flex;
            gap: 0.5rem;
        }
        
        .page-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            border: 1px solid #e2e8f0;
            background-color: white;
            color: #64748b;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .page-btn:hover {
            border-color: #3b82f6;
            color: #3b82f6;
        }
        
        .page-btn.active {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }
        
        .page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .page-btn.disabled:hover {
            border-color: #e2e8f0;
            color: #64748b;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .filter-input-group {
                flex-direction: column;
                gap: 0.5rem;
            }
        }
        
        @media (max-width: 768px) {
            .sort-view-controls {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .filter-actions {
                flex-direction: column;
                gap: 0.75rem;
            }
            
            .filter-actions button {
                width: 100%;
            }
        }
        
        /* 动画效果 */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        /* 筛选标签 */
        .active-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.02);
        }
        
        .active-filter-tag {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            background-color: #f1f5f9;
            border-radius: 20px;
            font-size: 0.85rem;
            color: #64748b;
        }
        
        .remove-filter {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: rgba(0,0,0,0.05);
            color: #64748b;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.7rem;
            transition: all 0.2s;
        }
        
        .remove-filter:hover {
            background-color: rgba(0,0,0,0.1);
            color: #334155;
        }
        
        .clear-all-filters {
            color: #3b82f6;
            background: none;
            border: none;
            font-size: 0.85rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 4px 8px;
            border-radius: 4px;
        }
        
        .clear-all-filters:hover {
            background-color: #f1f5f9;
        }
        
        /* 页脚 */
        footer {
            background-color: white;
            padding: 2rem 0;
            border-top: 1px solid #f1f5f9;
            margin-top: 3rem;
        }
        
        .footer-content {
            text-align: center;
            color: #64748b;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-heart"></i>
                <span>心动社交</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav ms-auto gap-1">
                    <li class="nav-item">
                        <a href="#" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link active">活动列表</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">附近的人</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">消息</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-primary">
                            <i class="fas fa-plus me-1"></i> 发起活动
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-5">
        <h1 class="mb-4">活动列表</h1>
        
        <!-- 活跃的筛选标签 -->
        <div class="active-filters" id="activeFilters">
            <div class="active-filter-tag">
                <span>音乐演出</span>
                <button class="remove-filter" data-type="category" data-value="音乐演出">×</button>
            </div>
            <div class="active-filter-tag">
                <span>未来7天</span>
                <button class="remove-filter" data-type="date" data-value="7days">×</button>
            </div>
            <div class="active-filter-tag">
                <span>5公里以内</span>
                <button class="remove-filter" data-type="distance" data-value="5km">×</button>
            </div>
            <button class="clear-all-filters">
                <i class="fas fa-times"></i>
                <span>清除全部</span>
            </button>
        </div>
        
        <!-- 筛选区域 -->
        <div class="filters-container">
            <div class="row">
                <!-- 左侧筛选面板 -->
                <div class="col-md-8">
                    <!-- 活动分类筛选 -->
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-tags"></i>
                            活动分类
                        </h3>
                        <div class="filter-options" id="categoryFilters">
                            <div class="filter-chip active" data-value="all">全部</div>
                            <div class="filter-chip" data-value="音乐演出">音乐演出</div>
                            <div class="filter-chip" data-value="美食聚会">美食聚会</div>
                            <div class="filter-chip" data-value="电影沙龙">电影沙龙</div>
                            <div class="filter-chip" data-value="运动健身">运动健身</div>
                            <div class="filter-chip" data-value="艺术展览">艺术展览</div>
                            <div class="filter-chip" data-value="户外旅行">户外旅行</div>
                            <div class="filter-chip" data-value="学习交流">学习交流</div>
                        </div>
                    </div>
                    
                    <!-- 日期筛选 -->
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-calendar"></i>
                            活动日期
                        </h3>
                        <div class="filter-options" id="dateFilters">
                            <div class="filter-chip active" data-value="all">全部日期</div>
                            <div class="filter-chip" data-value="today">今天</div>
                            <div class="filter-chip" data-value="tomorrow">明天</div>
                            <div class="filter-chip" data-value="weekend">本周末</div>
                            <div class="filter-chip" data-value="7days">未来7天</div>
                            <div class="filter-chip" data-value="custom">自定义</div>
                        </div>
                        
                        <div class="filter-input-group mt-2" id="customDateRange" style="display: none;">
                            <input type="date" class="form-control" id="startDate">
                            <input type="date" class="form-control" id="endDate">
                        </div>
                    </div>
                    
                    <!-- 位置筛选 -->
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-map-marker-alt"></i>
                            活动位置
                        </h3>
                        <div class="filter-options" id="locationFilters">
                            <div class="filter-chip active" data-value="all">全部位置</div>
                            <div class="filter-chip" data-value="1km">1公里以内</div>
                            <div class="filter-chip" data-value="3km">3公里以内</div>
                            <div class="filter-chip" data-value="5km">5公里以内</div>
                            <div class="filter-chip" data-value="10km">10公里以内</div>
                            <div class="filter-chip" data-value="custom">自定义区域</div>
                        </div>
                        
                        <div class="mt-3" id="customLocation" style="display: none;">
                            <input type="text" class="form-control mb-2" placeholder="输入地点">
                            <input type="range" min="1" max="50" value="10" class="range-slider" id="distanceSlider">
                            <div class="range-values">
                                <span>1公里</span>
                                <span id="distanceValue">10公里</span>
                                <span>50公里</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧筛选面板 -->
                <div class="col-md-4">
                    <!-- 价格筛选 -->
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-money-bill-wave"></i>
                            活动价格
                        </h3>
                        <div class="filter-options" id="priceFilters">
                            <div class="filter-chip active" data-value="all">全部价格</div>
                            <div class="filter-chip" data-value="free">免费</div>
                            <div class="filter-chip" data-value="paid">付费</div>
                            <div class="filter-chip" data-value="custom">自定义范围</div>
                        </div>
                        
                        <div class="filter-input-group mt-2" id="customPriceRange" style="display: none;">
                            <input type="number" class="form-control" placeholder="最低价格" id="minPrice">
                            <input type="number" class="form-control" placeholder="最高价格" id="maxPrice">
                        </div>
                    </div>
                    
                    <!-- 参与人数筛选 -->
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-users"></i>
                            参与人数
                        </h3>
                        <div class="filter-options" id="participantFilters">
                            <div class="filter-chip active" data-value="all">不限</div>
                            <div class="filter-chip" data-value="few">较少 (1-10人)</div>
                            <div class="filter-chip" data-value="medium">中等 (11-50人)</div>
                            <div class="filter-chip" data-value="many">较多 (51人以上)</div>
                        </div>
                    </div>
                    
                    <!-- 筛选操作按钮 -->
                    <div class="filter-actions">
                        <button class="btn btn-reset" id="resetFilters">
                            <i class="fas fa-sync-alt me-1"></i> 重置筛选
                        </button>
                        <button class="btn btn-apply" id="applyFilters">
                            <i class="fas fa-filter me-1"></i> 应用筛选
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 排序和视图切换 -->
        <div class="sort-view-controls">
            <div class="sort-options">
                <div class="sort-option active" data-sort="recommended">
                    <i class="fas fa-star"></i>
                    <span>推荐排序</span>
                </div>
                <div class="sort-option" data-sort="newest">
                    <i class="fas fa-clock"></i>
                    <span>最新发布</span>
                </div>
                <div class="sort-option" data-sort="distance">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>距离最近</span>
                </div>
                <div class="sort-option" data-sort="popular">
                    <i class="fas fa-fire-alt"></i>
                    <span>热门程度</span>
                </div>
            </div>
            
            <div class="view-options">
                <button class="view-btn active" data-view="grid" title="网格视图">
                    <i class="fas fa-th"></i>
                </button>
                <button class="view-btn" data-view="list" title="列表视图">
                    <i class="fas fa-list"></i>
                </button>
                <button class="view-btn" data-view="compact" title="紧凑视图">
                    <i class="fas fa-align-justify"></i>
                </button>
            </div>
        </div>
        
        <!-- 结果统计 -->
        <div class="results-info">
            找到 <strong>24</strong> 个符合条件的活动
        </div>
        
        <!-- 活动列表 -->
        <div class="events-container grid-view" id="eventsContainer">
            <!-- 活动1 -->
            <div class="event-card fade-in">
                <div class="image-container">
                    <img src="https://picsum.photos/600/400?random=1" alt="城市音乐节现场" class="event-image">
                </div>
                <div class="event-content">
                    <span class="event-category cat-music">音乐演出</span>
                    <h3 class="event-title">2023城市音乐节，感受夏日激情</h3>
                    <div class="event-meta">
                        <i class="far fa-calendar-alt"></i>
                        <span>2023年7月15日 18:00</span>
                    </div>
                    <div class="event-meta">
                        <i class="far fa-map-marker-alt"></i>
                        <span>中央公园音乐广场 (3.2km)</span>
                    </div>
                    <div class="event-host">
                        <img src="https://picsum.photos/200/200?random=101" alt="王音乐的头像" class="host-avatar">
                        <span>发起人: 王音乐</span>
                    </div>
                    <div class="event-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>1.2k</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>86</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-user"></i>
                            <span>328人参加</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>245</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="action-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                        <button class="action-btn primary">
                            <i class="far fa-plus-circle"></i>
                            <span>参加</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 活动2 -->
            <div class="event-card fade-in">
                <div class="image-container">
                    <img src="https://picsum.photos/600/400?random=2" alt="爵士音乐会" class="event-image">
                </div>
                <div class="event-content">
                    <span class="event-category cat-music">音乐演出</span>
                    <h3 class="event-title">爵士之夜，蓝调音乐现场演出</h3>
                    <div class="event-meta">
                        <i class="far fa-calendar-alt"></i>
                        <span>每周五 21:00</span>
                    </div>
                    <div class="event-meta">
                        <i class="far fa-map-marker-alt"></i>
                        <span>蓝调酒吧 (1.8km)</span>
                    </div>
                    <div class="event-host">
                        <img src="https://picsum.photos/200/200?random=102" alt="周爵士的头像" class="host-avatar">
                        <span>发起人: 周爵士</span>
                    </div>
                    <div class="event-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>956</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>53</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-user"></i>
                            <span>48人参加</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>207</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="action-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                        <button class="action-btn primary">
                            <i class="far fa-plus-circle"></i>
                            <span>参加</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 活动3 -->
            <div class="event-card fade-in">
                <div class="image-container">
                    <img src="https://picsum.photos/600/400?random=3" alt="摇滚现场演出" class="event-image">
                </div>
                <div class="event-content">
                    <span class="event-category cat-music">音乐演出</span>
                    <h3 class="event-title">地下摇滚现场，释放你的激情</h3>
                    <div class="event-meta">
                        <i class="far fa-calendar-alt"></i>
                        <span>7月16日 22:00</span>
                    </div>
                    <div class="event-meta">
                        <i class="far fa-map-marker-alt"></i>
                        <span>迷笛俱乐部 (4.5km)</span>
                    </div>
                    <div class="event-host">
                        <img src="https://picsum.photos/200/200?random=103" alt="李摇滚的头像" class="host-avatar">
                        <span>发起人: 李摇滚</span>
                    </div>
                    <div class="event-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>753</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>42</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-user"></i>
                            <span>86人参加</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>156</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="action-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                        <button class="action-btn primary">
                            <i class="far fa-plus-circle"></i>
                            <span>参加</span>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 活动4 -->
            <div class="event-card fade-in">
                <div class="image-container">
                    <div class="no-image">
                        <i class="fas fa-music fa-3x"></i>
                    </div>
                </div>
                <div class="event-content">
                    <span class="event-category cat-music">音乐演出</span>
                    <h3 class="event-title">古典音乐赏析会：贝多芬作品集</h3>
                    <div class="event-meta">
                        <i class="far fa-calendar-alt"></i>
                        <span>7月20日 19:30</span>
                    </div>
                    <div class="event-meta">
                        <i class="far fa-map-marker-alt"></i>
                        <span>城市音乐厅 (2.7km)</span>
                    </div>
                    <div class="event-host">
                        <img src="https://picsum.photos/200/200?random=104" alt="张古典的头像" class="host-avatar">
                        <span>发起人: 张古典</span>
                    </div>
                    <div class="event-stats">
                        <div class="stat-item">
                            <i class="far fa-eye"></i>
                            <span>421</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-comment"></i>
                            <span>23</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-user"></i>
                            <span>56人参加</span>
                        </div>
                        <div class="stat-item">
                            <i class="far fa-heart"></i>
                            <span>89</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="action-btn">
                            <i class="far fa-bookmark"></i>
                            <span>收藏</span>
                        </button>
                        <button class="action-btn primary">
                            <i class="far fa-plus-circle"></i>
                            <span>参加</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination-container">
            <div class="pagination">
                <button class="page-btn disabled">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="page-btn active">1</button>
                <button class="page-btn">2</button>
                <button class="page-btn">3</button>
                <button class="page-btn">4</button>
                <button class="page-btn">5</button>
                <button class="page-btn">
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <p>&copy; 2023 心动社交 - 让每次活动都充满惊喜</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化日期选择器，设置默认日期
            const today = new Date();
            const formattedToday = today.toISOString().split('T')[0];
            
            const nextWeek = new Date();
            nextWeek.setDate(today.getDate() + 7);
            const formattedNextWeek = nextWeek.toISOString().split('T')[0];
            
            document.getElementById('startDate').value = formattedToday;
            document.getElementById('endDate').value = formattedNextWeek;
            
            // 筛选芯片点击事件
            const filterChips = document.querySelectorAll('.filter-chip');
            filterChips.forEach(chip => {
                chip.addEventListener('click', function() {
                    // 获取同组的所有芯片
                    const siblings = this.parentElement.querySelectorAll('.filter-chip');
                    
                    // 移除同组其他芯片的active类
                    siblings.forEach(sib => sib.classList.remove('active'));
                    
                    // 为当前芯片添加active类
                    this.classList.add('active');
                    
                    // 特殊处理自定义选项
                    if (this.dataset.value === 'custom') {
                        const parentId = this.parentElement.id;
                        
                        if (parentId === 'dateFilters') {
                            document.getElementById('customDateRange').style.display = 'flex';
                        } else if (parentId === 'locationFilters') {
                            document.getElementById('customLocation').style.display = 'block';
                        } else if (parentId === 'priceFilters') {
                            document.getElementById('customPriceRange').style.display = 'flex';
                        }
                    } else {
                        // 隐藏自定义选项
                        document.getElementById('customDateRange').style.display = 'none';
                        document.getElementById('customLocation').style.display = 'none';
                        document.getElementById('customPriceRange').style.display = 'none';
                    }
                });
            });
            
            // 距离滑块事件
            const distanceSlider = document.getElementById('distanceSlider');
            const distanceValue = document.getElementById('distanceValue');
            
            distanceSlider.addEventListener('input', function() {
                distanceValue.textContent = this.value + '公里';
            });
            
            // 视图切换事件
            const viewButtons = document.querySelectorAll('.view-btn');
            const eventsContainer = document.getElementById('eventsContainer');
            
            viewButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    // 移除其他按钮的active类
                    viewButtons.forEach(b => b.classList.remove('active'));
                    
                    // 为当前按钮添加active类
                    this.classList.add('active');
                    
                    // 移除所有视图类
                    eventsContainer.classList.remove('grid-view', 'list-view', 'compact-view');
                    
                    // 添加当前视图类
                    eventsContainer.classList.add(this.dataset.view + '-view');
                });
            });
            
            // 排序选项事件
            const sortOptions = document.querySelectorAll('.sort-option');
            
            sortOptions.forEach(option => {
                option.addEventListener('click', function() {
                    // 移除其他选项的active类
                    sortOptions.forEach(opt => opt.classList.remove('active'));
                    
                    // 为当前选项添加active类
                    this.classList.add('active');
                    
                    // 这里可以添加实际的排序逻辑
                    console.log('排序方式: ' + this.dataset.sort);
                });
            });
            
            // 应用筛选按钮事件
            document.getElementById('applyFilters').addEventListener('click', function() {
                // 收集所有筛选条件
                const category = document.querySelector('#categoryFilters .filter-chip.active').dataset.value;
                const date = document.querySelector('#dateFilters .filter-chip.active').dataset.value;
                const location = document.querySelector('#locationFilters .filter-chip.active').dataset.value;
                const price = document.querySelector('#priceFilters .filter-chip.active').dataset.value;
                const participants = document.querySelector('#participantFilters .filter-chip.active').dataset.value;
                
                // 处理自定义日期范围
                let startDate, endDate;
                if (date === 'custom') {
                    startDate = document.getElementById('startDate').value;
                    endDate = document.getElementById('endDate').value;
                }
                
                // 处理自定义位置
                let customLocation, distance;
                if (location === 'custom') {
                    customLocation = document.querySelector('#customLocation input[type="text"]').value;
                    distance = distanceSlider.value;
                }
                
                // 处理自定义价格范围
                let minPrice, maxPrice;
                if (price === 'custom') {
                    minPrice = document.getElementById('minPrice').value;
                    maxPrice = document.getElementById('maxPrice').value;
                }
                
                // 构建筛选条件对象
                const filters = {
                    category,
                    date,
                    location,
                    price,
                    participants,
                    ...(date === 'custom' && { startDate, endDate }),
                    ...(location === 'custom' && { customLocation, distance }),
                    ...(price === 'custom' && { minPrice, maxPrice })
                };
                
                console.log('应用筛选条件:', filters);
                
                // 这里可以添加实际的筛选逻辑
                // 模拟筛选加载效果
                const eventCards = document.querySelectorAll('.event-card');
                eventCards.forEach((card, index) => {
                    card.style.opacity = '0.5';
                    setTimeout(() => {
                        card.style.opacity = '1';
                    }, 500 + index * 100);
                });
            });
            
            // 重置筛选按钮事件
            document.getElementById('resetFilters').addEventListener('click', function() {
                // 重置所有筛选芯片
                document.querySelectorAll('.filter-chip').forEach(chip => {
                    if (chip.dataset.value === 'all') {
                        chip.classList.add('active');
                    } else {
                        chip.classList.remove('active');
                    }
                });
                
                // 隐藏所有自定义选项
                document.getElementById('customDateRange').style.display = 'none';
                document.getElementById('customLocation').style.display = 'none';
                document.getElementById('customPriceRange').style.display = 'none';
                
                // 重置排序选项
                document.querySelectorAll('.sort-option').forEach(option => {
                    if (option.dataset.sort === 'recommended') {
                        option.classList.add('active');
                    } else {
                        option.classList.remove('active');
                    }
                });
                
                console.log('已重置所有筛选条件');
            });
            
            // 移除单个筛选标签
            const removeFilterButtons = document.querySelectorAll('.remove-filter');
            removeFilterButtons.forEach(btn => {
                btn.addEventListener('click', function() {
                    const filterType = this.dataset.type;
                    const filterValue = this.dataset.value;
                    
                    // 移除标签
                    this.closest('.active-filter-tag').remove();
                    
                    // 重置对应筛选条件
                    if (filterType === 'category') {
                        const categoryChips = document.querySelectorAll('#categoryFilters .filter-chip');
                        categoryChips.forEach(chip => {
                            if (chip.dataset.value === 'all') {
                                chip.classList.add('active');
                            } else if (chip.dataset.value === filterValue) {
                                chip.classList.remove('active');
                            }
                        });
                    } else if (filterType === 'date') {
                        const dateChips = document.querySelectorAll('#dateFilters .filter-chip');
                        dateChips.forEach(chip => {
                            if (chip.dataset.value === 'all') {
                                chip.classList.add('active');
                            } else if (chip.dataset.value === filterValue) {
                                chip.classList.remove('active');
                            }
                        });
                        document.getElementById('customDateRange').style.display = 'none';
                    } else if (filterType === 'distance') {
                        const locationChips = document.querySelectorAll('#locationFilters .filter-chip');
                        locationChips.forEach(chip => {
                            if (chip.dataset.value === 'all') {
                                chip.classList.add('active');
                            } else if (chip.dataset.value === filterValue) {
                                chip.classList.remove('active');
                            }
                        });
                        document.getElementById('customLocation').style.display = 'none';
                    }
                    
                    // 如果没有筛选标签了，隐藏整个容器
                    if (document.querySelectorAll('#activeFilters .active-filter-tag').length === 0) {
                        document.getElementById('activeFilters').style.display = 'none';
                    }
                });
            });
            
            // 清除所有筛选标签
            document.querySelector('.clear-all-filters').addEventListener('click', function() {
                // 移除所有标签
                document.querySelectorAll('#activeFilters .active-filter-tag').forEach(tag => tag.remove());
                
                // 隐藏筛选标签容器
                document.getElementById('activeFilters').style.display = 'none';
                
                // 重置所有筛选条件
                document.getElementById('resetFilters').click();
            });
            
            // 分页按钮事件
            const pageButtons = document.querySelectorAll('.page-btn:not(.disabled)');
            pageButtons.forEach(btn => {
                if (!btn.querySelector('i')) { // 不是箭头按钮
                    btn.addEventListener('click', function() {
                        // 移除其他页码按钮的active类
                        pageButtons.forEach(b => {
                            if (!b.querySelector('i')) {
                                b.classList.remove('active');
                            }
                        });
                        
                        // 为当前页码按钮添加active类
                        this.classList.add('active');
                        
                        // 滚动到页面顶部
                        window.scrollTo({ top: 0, behavior: 'smooth' });
                        
                        // 这里可以添加实际的分页逻辑
                        console.log('切换到第 ' + this.textContent + ' 页');
                    });
                }
            });
            
            // 滚动渐入动画
            const fadeElements = document.querySelectorAll('.fade-in');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        setTimeout(() => {
                            entry.target.style.opacity = '1';
                            entry.target.style.transform = 'translateY(0)';
                        }, index * 100);
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            fadeElements.forEach(el => observer.observe(el));
        });
    </script>
</body>
</html>
    
